<template>
	<div id="VoteRank">
		<div class="head">
			<img src="../assets/images/home/active_rank_bg.png" alt="" />
		</div>
		<div class="data_num">
			<ul>
				<li class="collection_num">
					<p>{{details.item_count}}</p>
					<span>参赛作品</span>
				</li>
				<li class="vux-1px-l">
					<p>{{details.ticket_count * multiple}}</p>
					<span>累计投票</span>
				</li>
				<li class="access_num vux-1px-l">
					<p>{{details.vote_vcount}}</p>
					<span>总访问量</span>
				</li>
			</ul>
		</div>
		<!--倒计时部分-->
		<div class="countdown">
			<div class="count">
				<count-down :currentTime="Number(cur_time)" :startTime="Number(new Date(details.vote_starttime).getTime() / 1000)" :endTime="Number(new Date(details.vote_endtime).getTime() / 1000)" :tipText="'距开始'" :tipTextEnd="'距活动结束仅剩'" :endText="'已结束'" :dayTxt="'天'" :hourTxt="'时'" :minutesTxt="'分'" :secondsTxt="'秒'">
				</count-down>
			</div>
		</div>
		<!--投票部分-->
		<ul class="vote_goods">
			<li class="goods" v-for="(item,index) in rankList">
				<div class="left_top_triangle" v-if="index == 0">
					<img src="../assets/images/home/active_top1.png" alt="" />
				</div>
				<div class="left_top_triangle" v-if="index == 1">
					<img src="../assets/images/home/active_top2.png" alt="" />
				</div>
				<div class="left_top_triangle" v-if="index == 2">
					<img src="../assets/images/home/active_top3.png" alt="" />
				</div>
				<div class="left_top_triangle" v-if="index >2">
					<span class="key">{{index+1}}</span>
				</div>
				<i class="pm-icon active_left_ticket"></i>
				<router-link :to="'VoteDetail/item_id/' + item.item_id">
					<img :src="item.item_img" />
					<div class="content">
						<p class="item_title">{{item.item_title}}(编号{{item.item_id}})</p>
						<p class="vote_num">
							<i class="pm-icon icon-fire"></i>
							<span>{{item.ticket_count * multiple}}</span>
							<button @click="voteTicket(item.vote_id,item.item_id)">投票</button>
						</p>

					</div>
				</router-link>
			</li>
		</ul>
		<bottom></bottom>
	</div>
</template>

<script>
	import $ from 'jquery'
	import CountDown from 'vue2-countdown';
	import { XHeader } from 'vux'
	import axios from 'axios'
	import bottom from './ActiveFooter'
	import 'vux/src/styles/1px.less';
	export default {
		name: 'ranking',
		data() {
			return {
				vote_id: '1',
				rankList: [],
				multiple: '10',
				details: '',
				cur_time: ''
			}
		},
		components: {
			XHeader,
			CountDown,
			bottom
		},
		mounted() {
			this.getRankList();
			this.getVoteDetail();
		},
		methods: {
			getRankList: function() {
				let _this = this;
				let more = true;
				var page = 1;
				this.$http({
					methods: 'GET',
					url: '/los/api/vote/item_list.json?vote_id=' + this.vote_id + '&sort=ticket_count'
				}).then((result) => {
					this.rankList = result.data.item_list;
				}).catch((err) => {

				})
				$(window).scroll(function() {
					console.log('执行');
					var htmlHeight = $(document).height();
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							axios.get('/los/api/vote/item_list.json?vote_id=' + _this.vote_id + '&sort=ticket_count&page=' + page).then(function(result) {
								$.each(result.data.item_list, function(index, val) {
									_this.rankList.push(val);
								});
								more = true;
								if(result.data.item_list == '') {
									more = false;
								}
							}).catch(function(error) {
								console.log(error);
							});
						}
					}
				})
			},
			getVoteDetail: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/vote/details.json?vote_id=' + this.vote_id
				}).then((result) => {
					if(result.data.code == 1) {
						this.cur_time = result.data.cur_time;
						this.details = result.data.data;
					}
				}).catch((err) => {

				})

			},
			//点击投票
			voteTicket: function(vote_id, item_id) {
				console.log(item_id, vote_id);
				var params = {
					item_id: item_id,
					vote_id: vote_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/vote/ticket.json',
					data: params
				}).then((result) => {
					this.success = !this.success;
					this.msg = result.data.msg;
				}).catch((err) => {

				})
			},
		}
	}
</script>

<style scoped lang="less">
	#VoteRank {
		background: #f3f7f6;
	}
	
	.head {
		height: 5.09rem;
		img {
			width: 100%;
			height: 100%;
		}
	}
	/*数据统计部分*/
	
	.data_num {
		height: 1.8rem;
		background: #fff;
		ul {
			height: 100%;
			padding: 0.4rem 0;
			li {
				float: left;
				text-align: center;
				width: 3.33rem;
				p {
					font-size: 0.45rem;
					color: #d35f5d;
				}
				span {
					font-size: 0.32rem;
					color: #AAAAAA;
				}
			}
			.vux-1px-l:before {
				top: 0.21rem;
				height: 0.48rem;
				border-color: #e6e6e6!important;
			}
		}
	}
	/*倒计时*/
	
	.countdown {
		background: #fff;
		height: 0.88rem;
		width: 7.86rem;
		padding: 0.16rem 0;
		text-align: center;
		margin-top: 0.4rem;
		margin: 0.4rem auto 0 auto;
		border-radius: 0.08rem;
		p {
			font-size: 0.37rem;
			line-height: 0.62rem;
			span {
				display: inline-block;
				width: 0.56rem;
				height: 0.56rem;
				background: #bb6362;
				border-radius: 0.05rem;
				color: #FFFFFF;
				font-size: 0.37rem;
				margin-right: 0.13rem;
			}
		}
	}
	/*商品投票*/
	
	.vote_goods {
		margin-top: 0.4rem;
		padding: 0 0.26rem 1.8rem;
		clear: both;
		.goods {
			height: 2.58rem;
			border-radius: 0.1rem;
			background: #fff;
			padding: 0.2rem 0.26rem 0.2rem 0.6rem;
			position: relative;
			margin-bottom: 0.26rem;
			.left_top_triangle {
				position: absolute;
				z-index: 222;
				left: 0.1rem;
				top: 0.13rem;
				color: #fff;
				img {
					width: 0.53rem;
					height: 0.53rem;
				}
				.key {
					font-size: 0.42rem;
					color: #fff;
					margin-left: 0.13rem;
				}
			}
			.active_left_ticket {
				position: absolute;
				width: 1.14rem;
				height: 1.14rem;
				z-index: 111;
				top: 0;
				left: 0;
			}
			img {
				float: left;
				height: 2.18rem;
				width: 2.18rem;
				border-radius: 50%;
			}
			.content {
				font-size: 0.4rem;
				overflow: hidden;
				padding: 0.4rem 0.26rem 0 0.4rem;
				.item_title {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 0.4rem;
				}
				.goods_name {
					color: #333333;
					margin-bottom: 0.46rem;
				}
				.vote_num {
					color: #d34f4f;
					overflow: hidden;
				}
				.icon-fire {
					float: left;
					width: 0.28rem;
					height: 0.37rem;
					margin-right: 0.13rem;
				}
				span {
					color: #d34f4f;
					float: left;
				}
				button {
					float: left;
					color: #fff;
					width: 1.86rem;
					height: 0.72rem;
					background: #c76d6b;
					border-radius: 0.36rem;
					border: none;
					float: right;
					outline: none;
				}
			}
		}
	}
</style>